<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>Insert title here</title>
<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>

</head>
<body>
	<div id="app">
		<p>
			就像HelloWorld展示的那样，app.html是view层，app.js是model层，通过vue.js（使用v-model这个指令）完成中间的底层逻辑，实现绑定的效果
			(修改input中的数据,数据同步变化无需获取dom元素)</p>
		<input type="text" v-model="message">
		<div>修改input中的数据,数据同步变化 :{{message + ' vue is awesome'}}</div>
		<div v-once> 使用"v-once"这个将不会改变: {{ message }}</div>
		
		<br>
		<div>原始html</div>
		<p>Using mustaches: {{ rawHtml }}</p>
		<p>Using v-html directive: <span v-html="rawHtml"></span></p>
	</div>
	<br>

	<div id="app-2">
		<h2>2 声明式渲染</h2>
		<span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span>
	</div>

	<div id="app-3">
		<h2>3 条件与循环--切换元素是否显示 app3.seen = false</h2>
		<p v-if="seen">现在你看到我了</p>
		<button 
			v-if="seen"
			v-bind:disabled="isButtonDisabled">Button</button>
	</div>
	
	<div id="app-4">
	<h2>4 条件与循环-- v-for 指令可以绑定数组的数据来渲染一个项目列表 app4.todos.push({ text: '新项目' })</h2>
	  <ol>
	    <li v-for="todo in todos">
	      {{ todo.text }}
	    </li>
	  </ol>
	</div>
	
	<div id="app-5">
	<h2>5 处理用户输入--用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法</h2>
	<p>1.  v-on:click="reverseMessage" 可缩写为@click="reverseMessage" </p>
	<p>2.  注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。</p>  
	  <p>{{ message }}</p>
	  <button v-on:click="reverseMessage" title="v-on:click='reverseMessage'">逆转消息</button>
	  <button @click="reverseMessage" title = "@click='reverseMessage'">逆转消息</button>
	</div>
	
	<div id="app-6">
	<h2>6 处理用户输入--用v-model 指令实现表单输入和应用状态之间的双向绑定 message</h2>
	  <p>{{ message }}</p>
	  <input v-model="message">
	</div>



	<div id="app-7">
		<ol>
			<!--
	      现在我们为每个 todo-item 提供 todo 对象
	      todo 对象是变量，即其内容可以是动态的。
	      我们也需要为每个组件提供一个“key”，稍后再
	      作详细解释。
	    -->
			<todo-item 
				v-for="item in groceryList" 
				v-bind:todo="item"
				v-bind:key="item.id"> 
			</todo-item>
		</ol>
	</div>

	<script>
		var app = new Vue({
			el : '#app',
			data : {
				message : 'hello vue.js.',
				rawHtml : '<span style="color:red">This should be red</span>'
			},
			
			//created 钩子可以用来在一个实例被创建之后执行代码
		  	created: function () {
			    // `this` 指向 vm 实例
			    console.log('message is: ' + this.message)
			 }
		});

		var app2 = new Vue({
			el : '#app-2',
			data : {
				message : '页面加载于 ' + new Date().toLocaleString()
			}
		});

		var app3 = new Vue({
			el : '#app-3',
			data : {
				seen : true,
				isButtonDisabled : true
			}
		});

		var app4 = new Vue({
			el : '#app-4',
			data : {
				todos : [ {
					text : '学习 JavaScript'
				}, {
					text : '学习 Vue'
				}, {
					text : '整个牛项目'
				} ]
			}
		});

		var app5 = new Vue({
			el : '#app-5',
			data : {
				message : 'Hello Vue.js!'
			},
			methods : {
				reverseMessage : function() {
					this.message = this.message.split('').reverse().join('')
				}
			}
		});

		var app6 = new Vue({
			el : '#app-6',
			data : {
				message : 'Hello Vue!'
			}
		});
		
		// 定义名为 todo-item 的新组件
		// Vue 组件都是 Vue 实例
		Vue.component('todo-item', {
			  props: ['todo'],
			  template: '<li>{{ todo.text }}</li>'
			});

		var app7 = new Vue({
		  el: '#app-7',
		  data: {
		    groceryList: [
		      { id: 0, text: '蔬菜' },
		      { id: 1, text: '奶酪' },
		      { id: 2, text: '随便其它什么人吃的东西' }
		    ]
		  }
		});
	</script>
</body>
</html>

